import eventBus from '@/enentBus';
// 函数防抖
import { debounce } from '@/utils';
import defaultGif from "@/assets/star.gif";

let imgs = [];

/**
 * 每次调用处理单个图片的显示问题
 * @param {Object} img 
 */
function setImage(img) {
    // 处理图片
    img.dom.src = defaultGif; // 直接将所有的图片都用默认的占位
    // 图片是否在视口方位内
    const clientHeight = document.documentElement.clientHeight;
    const rect = img.dom.getBoundingClientRect();
    const height = rect.height || 150; // 有的图片可能没有高度，给一个默认高度
    if (rect.top >= -height && rect.top <= clientHeight) {
        // 在视口范围内
        const tempImg = new Image();
        tempImg.onload = function () {
            // 真实图片加载完成之后
            img.dom.src = img.src;
        }
        tempImg.src = img.src;
        imgs = imgs.filter(i => i !== img)
    }
}
/**
 * 设置该显示的图片 
 */
function setImgs() {
    for (const img of imgs) {
        // 处理该图片
        setImage(img);

    }
}
/**
 * @param {HTMLElement} dom 一个dom对象
 */
function handleScroll() {
    setImgs();
}

// 从总线监听主页面滚动条
eventBus.$on("mainScroll", debounce(handleScroll, 100))


export default {
    inserted(el, bindings) {
        const img = {
            dom: el,
            src: bindings.value,
        };
        imgs.push(img);
        // 立即处理一次
        setImgs(img);
    },
    unbind(el) {
        imgs = imgs.filter((img) => {
            return img.dom !== el;
        })
    }
};